<template>
    <div class="product-list-view">
        <div class="page-header">
            <h1>{{ pageTitle }}</h1>
            <p>{{ pageDescription }}</p>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <LoadingSpinner />
        </div>

        <!-- 空状态 -->
        <div v-else-if="!products.length" class="empty-container">
            <EmptyState :title="`暂无${pageTitle}`" description="我们正在努力上架更多商品，敬请期待！" :icon="Goods" />
        </div>

        <!-- 商品列表 -->
        <div v-else class="product-grid-container">
            <el-row :gutter="20">
                <el-col v-for="product in products" :key="product.id" :xs="24" :sm="12" :md="8" :lg="6">
                    <ProductCard :product="product" />
                </el-col>
            </el-row>

            <!-- 分页 -->
            <div v-if="showPagination" class="pagination-container">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    v-model:current-page="currentPage" @current-change="handlePageChange" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { getProductList, getHotProducts, getCategoryDetail } from '@/api/modules/product'
import type { Product, Category } from '@/types'
import ProductCard from '@/components/business/ProductCard.vue'
import LoadingSpinner from '@/components/base/LoadingSpinner.vue'
import EmptyState from '@/components/base/EmptyState.vue'
import { Goods } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const products = ref<Product[]>([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
const pageTitle = ref('商品列表')
const pageDescription = ref('浏览我们的积分商品')
const showPagination = ref(true)

// 加载商品数据
const loadProducts = async (query: typeof route.query) => {
    try {
        loading.value = true
        showPagination.value = true
        const page = Number(query.page) || 1
        const categoryId = Number(query.categoryId) || undefined
        const type = query.type as string | undefined

        if (type === 'hot') {
            pageTitle.value = '热门兑换'
            pageDescription.value = '大家都在兑换的热门好物'
            const hotProducts = await getHotProducts()
            products.value = hotProducts
            total.value = hotProducts.length
            showPagination.value = false // Hot products API is not paginated
        } else if (type === 'new') {
            pageTitle.value = '新品上线'
            pageDescription.value = '最新上架的积分商品'
            const response = await getProductList({ page, size: pageSize.value })
            products.value = response.list
            total.value = response.total
        } else if (categoryId) {
            const category = await getCategoryDetail(categoryId)
            pageTitle.value = category.name
            pageDescription.value = category.description || `浏览 ${category.name} 分类下的商品`
            const response = await getProductList({ page, size: pageSize.value, categoryId })
            products.value = response.list
            total.value = response.total
        } else {
            pageTitle.value = '所有商品'
            pageDescription.value = '浏览我们的全部积分商品'
            const response = await getProductList({ page, size: pageSize.value })
            products.value = response.list
            total.value = response.total
        }
        currentPage.value = page

    } catch (error) {
        console.error('获取商品列表失败:', error)
        ElMessage.error('获取商品列表失败')
    } finally {
        loading.value = false
    }
}

// 处理分页变化
const handlePageChange = (page: number) => {
    const query = { ...route.query, page: page.toString() }
    router.push({ query })
}

// 监听路由变化
watch(
    () => route.query,
    (newQuery) => {
        loadProducts(newQuery)
    },
    { immediate: true, deep: true }
)

</script>

<style scoped>
.product-list-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-header h1 {
    color: #333;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 600;
}

.page-header p {
    color: #666;
    font-size: 16px;
}

.loading-container,
.empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.product-grid-container {
    margin-top: 20px;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
</style>
